
<template>
  <div>
    <el-container>
      <el-header class="el-this-header" style="height:120px;">
        <div>
          标的物名称：
          <span style="color:#D7000F">{{goodsData.goodsName}}</span>
        </div>
        <div>
          需缴纳保证金：
          <span style="color:#D7000F;font-size: 28px;">￥ {{goodsData.earnestMoney}}</span>
        </div>
      </el-header>
      <el-main>
        <div style="margin-bottom:10px">
          <span style="font-size:18px;color:black;font-weight:bold;margin-right: 20px;">竞买人请确认以下事项并勾选</span>
          <span style="font-size:12px;color:#bb8c00;background:url(//gtms02.alicdn.com/tps/i2/TB1IaQsGVXXXXbvXVXXzCmo.VXX-12-16.png) no-repeat left center ;padding-left:20px;">因不符合条件参加竞买的，将取消您的竞得资格，竞买保证金不予退还并承担相应法律责任。</span>
        </div>
        <div class="attention-box">
          <p>· 已阅读并知晓：拍下不买的后果，即保证金不予退还并承担相应的后果包括处罚等</p>
          <p>· 已阅读并知晓：本次报名仅代表本人，未接受他人委托参与竞买。(如需办理委托，请在报名前联系处置单位将双方信息录入系统)</p>
          <p>· 已阅读并知晓：如您报名成功，您的姓名、证件号码、手机号、联系地址等信息将披露给资产处置单位及相关服务提供方，用于核实竞买人的真实身份、竞买资格及相关服务提供</p>
          <p>· 已阅读并知晓：竞买人如果没有进行实地看样，视为接受标的所有瑕疵等细则</p>
          <p>· 已阅读并知晓：申请参与房产竞拍的，竞买人必须具备购房资格，竞拍成功后如无购房资格需承担相应法律后果</p>
          <p>· 已阅读并同意 <el-button type="text">《竞拍服务协议》</el-button></p>
          <p><el-checkbox v-model="checked" style="color:#D7000F;">本人已知晓并同意以上所有事项</el-checkbox></p>
        </div>
        <div style="margin-bottom:10px;margin-top: 20px;">
          <span style="font-size:18px;color:black;font-weight:bold;margin-right: 20px;">竞买人身份确认</span>
          <span style="font-size:12px;color:#bb8c00;background:url(//gtms02.alicdn.com/tps/i2/TB1IaQsGVXXXXbvXVXXzCmo.VXX-12-16.png) no-repeat left center ;padding-left:20px;">标的物交割时将核实该信息，请保证其真实有效，如非本人购买，请提前与资产处置单位确认是否可行。</span>
        </div>
        <div class="attention-box">
          <p>
            <span style="color:#D7000F">*</span>
            <span style="width:100px;display: inline-block;margin-left: 10px;">竞买人:</span>
            <span  style="margin-right: 20px;color:#333;font-weight: bold;">{{loginUser.userName}}</span>
            <span>(竞价成功后，将以此身份办理过户，如有委托，请咨询资产处置单位)</span>
          </p>
          <p>
            <span style="color:#D7000F">*</span>
            <span style="width:100px;display: inline-block;margin-left: 10px;">当前账号 :</span>
            <span  style="margin-right: 20px;color:#333;font-weight: bold;">{{phoneEncrypted}}</span>
          </p>
          <p>
            <span style="color:#D7000F">*</span>
            <span style="width:100px;display: inline-block;margin-left: 10px;">手机号码:</span>
            <span  style="margin-right: 20px;color:#333;font-weight: bold;">
              <el-input placeholder="请输入手机号"
              style="display:inline-block ;width:200px;"
              @change="checkPhone()"
              v-model="phoneCheck"></el-input>
            </span>
            <span style="color:#D7000F">{{message}}</span>
          </p>
          <p style="margin-top: 20px;">
            <i class="el-icon-success" style="color:#00AB69;font-size: 22px;"></i>
            注意：请您核实以上身份信息，并确保手机号与当前账号一致，否则无法参与竞拍
          </p>
        </div>
        <div class="pay-box">
          <span>需支付:</span>
          <span style="font-size: 30px;color:#D7000F;font-weight: bold;margin: 0 10px; ">￥ {{goodsData.earnestMoney}}</span>
          <el-button type="danger" class="pay-button" round @click="toPayPage()" v-show="checkStatus&&checked">去支付</el-button>
          <el-button type="danger" class="pay-button" round @click="toPayPage()" v-show="!checkStatus||!checked" disabled>去支付</el-button>
        </div>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>是否支付￥ {{goodsData.earnestMoney}}？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="payEarnestMoney()">确 定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'AuctionPcEarnestMoneyPage',

  data () {
    return {
      phoneCheck: '',
      checkStatus: false,
      message: '',
      dialogVisible: false,
      token: window.sessionStorage.getItem('token'), // 取token
      loginUser: {},
      goodsId: this.$route.query.goodsId,
      goodsData: {}, // 商品详细信息
      goodsEarnestMoney: {},
      phoneEncrypted: '',
      checked: false
    }
  },

  async mounted () {
    this.getLoginUser()
    this.getGoodsById()
  },

  methods: {
    // 支付保证金
    payEarnestMoney () {
      this.$axios.put('/client/auction/updateEarnestMoneyStatus', this.goodsEarnestMoney).then(res => {
        if (res.data.flag) {
          this.dialogVisible = false
          this.myMessage('success', res.data.obj)
          this.$router.push({
            path: '/noBiddingDetails',
            query: { goodsId: this.goodsId }
          })
        } else {
          this.myMessage('success', res.data.obj)
        }
      })
    },
    // 手机号加密
    encryptedPhone () {
      const reg = /(\d{3})\d{4}(\d{4})/ // 正则表达式
      console.log('aaaaa' + this.loginUser.userPhone)
      this.phoneEncrypted = this.loginUser.userPhone.replace(reg, '$1****$2')
    },
    // 校验手机号
    checkPhone () {
      if (this.loginUser.userPhone === this.phoneCheck) {
        this.checkStatus = true
      } else {
        this.message = '请输入与当前账号一致的手机号'
      }
    },
    // 前往支付页面
    toPayPage () {
      // 判断是否已存在交保信息
      if (JSON.stringify(this.goodsEarnestMoney) === '{}') { // 不存在，生成信息
        this.goodsEarnestMoney.goodsId = this.goodsId
        this.goodsEarnestMoney.userId = this.loginUser.id
        // this.$axios.post('/client/action/generateGoodsEarnestMoney', this.goodsEarnestMoney).then(res => {
        this.$axios.post('/client/auction/generateGoodsEarnestMoney', this.goodsEarnestMoney).then(res => {
          if (res.data.flag) {
            console.log(res.data.obj)
            console.log('生成成功')
          } else {
            console.log('生成失败')
          }
        })
      } else { // 已存在，直接修改保障金状态
        console.log('当前保障金信息存在')
      }
      this.dialogVisible = true
      // 修改用户交保障金状态
      // this.$axios.get('/client/action/updateEarnestMoneyStatus', {
      //   params: {
      //     userId: this.loginUser.userId,
      //     goodsId: this.goodsId
      //   }
      // }).then(res => {
      //   if (res.data.flag) {
      //     this.loginUser = res.data.obj
      //     console.log(this.loginUser)
      //   } else {
      //     // this.myMessage('当前用户暂未参与交易', 'error')
      //     console.log('当前用户暂未参与交易')
      //   }
      // })
    },
    // 获取当前用户交保状态
    getGoodsEarnestMoneyByUserId () {
      this.$axios.get('/client/auction/getGoodsEarnestMoneyByUserId',
        {
          params: {
            userId: this.loginUser.id,
            goodsId: this.goodsId
          }
        }).then(res => {
        if (res.data.flag) {
          this.goodsEarnestMoney = res.data.obj
        } else {
          console.log('当前用户暂未参与交易')
        }
      })
    },
    // 获取当前登录的用户
    async getLoginUser () {
      this.$axios.post('/clientuser/getLoginUser', this.token).then(res => {
        if (res.data.flag) {
          this.loginUser = res.data.obj
          this.encryptedPhone()
          this.getGoodsEarnestMoneyByUserId()
          // console.log(this.loginUser)
        } else {
          // this.myMessage('当前用户暂未参与交易', 'error')
          console.log('当前用户暂未参与交易')
        }
      })
      console.log('已获取登录用户信息')
    },
    // 查询当前商品id
    async getGoodsById () {
      this.$axios.get('/client/auction/getGoodsById', {
        params: {
          goodsId: this.goodsId
        }
      }).then(res => {
        if (res.data.flag) {
          this.goodsData = res.data.obj
          console.log(this.goodsData)
        } else {
          this.myMessage('商品加载失败', 'error')
        }
      })
    },
    // 提示信息
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style>
  .el-this-header {
    background-color: #fafaf2;
    color: #333;
    line-height: 40px;
    font-weight: bold;
    padding: 20px;
    font-size: 14px;
  }

  .el-main {
    color: #333;
    padding: 20px;
  }
  .attention-box p{
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    color:gray;
    margin-left: 10px;
  }
  /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
    color: #D7000F;
  }
  .pay-box{
    width: 100%;
    height:60px;
    line-height: 60px;
    background-color: white;
    text-align: center;
    position:fixed;
    bottom: 0;
    left: 0;
  }
  .pay-button{
    width:140px;
    font-size:18px;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
      bottom: 6px;
  }
</style>
